<template>
  <div>
    <div ref="chartContainer" :style="{ width: '100%', height: '300px' }" />
    <FaultDialog
      v-model:faultVisible="faultVisible"
      :className="className"
      :dateType="dateType"
      :alarmType="alarmType"
      :startTime="startTime"
      :endTime="endTime"
    />
    <OverTargetDialog
      v-model:overVisible="overVisible"
      :className="className"
      :dateType="dateType"
      :alarmType="alarmType"
      :startTime="startTime"
      :endTime="endTime"
    />
  </div>
</template>

<script setup>
import { dataURLtoBlob } from "@/utils/common";
import * as echarts from "echarts";
import { computed, onUnmounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import FaultDialog from "./FaultDialog.vue";
import OverTargetDialog from "./OverTargetDialog.vue";

const router = useRouter();

const faultVisible = ref(false);
const overVisible = ref(false);
const alarmType = ref("");

const chartContainer = ref(null);
let chartInstance = null;
const props = defineProps({
  chartsData: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    default: ""
  },
  dateType: {
    type: String,
    default: "day"
  },
  className: {
    type: String,
    default: ""
  },
  startTime: {
    type: String,
    default: ""
  },
  endTime: {
    type: String,
    default: ""
  }
});

const options = computed(() => {
  return {
    tooltip: {
      trigger: "item"
    },
    legend: {
      bottom: 8,
      left: "center",
      itemWidth: 15,
      itemHight: 5,
      itemGap: 5,
      padding: 2
    },
    series: [
      {
        type: "pie",
        center: props.type === "level" ? ["50%", "50%"] : ["50%", "35%"],
        radius: props.type === "level" ? ["40%", "70%"] : "50%",
        data: props.type === "level" ? props.chartsData.alarmLevelList : props.chartsData.alarmTypeList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        color:
          props.type === "level"
            ? ["#E02B2B", "#FF771E", "#F1B11A", "#4A9BFF"]
            : ["#407DF1", "#13C4C3", "#F1A861", "#8180D9", "#42A6E9", "#FF948A", "#AC7EDA", "#7AC3E9", "#46A1BF", "#8D9CD2", "#3FAC87", "#BAA282"]
      }
    ]
  };
});
const initChart = () => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    chartInstance.setOption(options.value);
    chartInstance.on("click", params => {
      console.log("参数", params);

      if (props.type === "level") {
        const { startTime, endTime } = props.chartsData;
        router.push(
          `/all/alert/business?alarmLevel=${params.name}&className=${props.className}&active=ALL&startTime=${startTime}&endTime=${endTime}`
        );
      } else {
        if (params.name === "故障报警") {
          faultVisible.value = true;
          alarmType.value = params.data.code;
        } else if (params.name === "超限报警") {
          overVisible.value = true;
          alarmType.value = params.data.code;
        } else {
          alarmType.value = "";
          // 取到类型的code
          const filterItem = props.chartsData?.alarmTypeList?.find(item => item.name === params.name);
          const { startTime, endTime } = props.chartsData;
          router.push(
            `/all/alert/business?className=${props.className}&active=ALL&startTime=${startTime}&endTime=${endTime}&alarmType=${filterItem?.code}`
          );
        }
      }
    });
  }
};

const downLoad = () => {
  const img64 = chartInstance.getDataURL({
    type: "png",
    pixelRatio: 2,
    backgroundColor: "#fff"
  });
  const blob = dataURLtoBlob(img64);
  const imgSrc = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = imgSrc;
  link.style.display = "none";
  link.setAttribute("download", props.type === "level" ? "报警级别占比" : "报警类型占比");
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href);
  document.body.removeChild(link);
};

defineExpose({
  downLoad
});

watch(
  () => props.chartsData,
  chartsData => {
    initChart();
  }
);
onUnmounted(() => {
  chartInstance && chartInstance.dispose();
});
</script>
